﻿<%@ Page Language="C#" MasterPageFile="Cliente.Master" AutoEventWireup="true" CodeBehind="VerPlano.aspx.cs" Inherits="Smart_House_System.Cliente.visualizarplano" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Button ID="btnVerCam" runat="server"
        Text=" " CssClass="esconderBtn"/>
    <asp:Label ID="lblCasa" runat="server" Text="Id Casa" Visible="false"></asp:Label>
    <select id="cmbCasas" class="styled-select" style="width:300px" runat="server" onchange="ChooseCasa()"></select>
    <asp:Label ID="Label1" runat="server" Text="Id Plano"></asp:Label>
    <select id="cmbUsu" class="styled-select" runat="server" style="cursor:pointer" onchange="ChoosePlano()"></select>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp12" runat="server" PopupControlID="Panel1" TargetControlID="btnVerCam"
    CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" style="height: 100%;">
        <ContentTemplate>
            <div id="videoContenido" >

            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:Button ID="btnClose" runat="server" Text="Close"/>
</asp:Panel>
<!-- ModalPopupExtender -->

<div style="width:100%; text-align:center;" >
    <asp:Label ID="lblMensaje" runat="server" Text="" Font-Size="Larger" ForeColor="Red"></asp:Label>
</div>
<div id="makeMeDroppable" style="width:80%" >
    <img id="imgPlano" alt="" src="" style="width:100%; height: 450px;
        background-repeat:no-repeat;background-size:100% 100%;top:50%;z-index:1;" runat="server"/>
</div>

<input type="hidden" id="miInput2" runat="server" style="top:50%;"/>
<asp:Button ID="btnAux3" runat="server" Text="" Width="0px" Height="0px" CssClass="esconderBtn" onclick="btnAux3_Click"  />
<asp:Button ID="btnAux2" runat="server" Text="" Width="0px" Height="0px" CssClass="esconderBtn" onclick="btnAux2_Click"  />

	<div id="bloqueo" class="pantalla_bloqueo">
		<div id="mensaje_bloqueador" >
			<p>CARGANDO...</p>
		</div>
		<div id="imagen_bloqueador" >
			<img src="buscando.gif">
		</div>
	</div>

    <script type="text/javascript">

        $('#MainContent_cmbUsu').change(function () {
            var $selectedOption = $(this).find('option:selected');
            var selectedLabel = $selectedOption.text();
            var selectedValue = $selectedOption.val();
            document.getElementById('MainContent_imgPlano').src = selectedValue;
            getObjects();
        });

        $(document).ready(function () {
            getObjects();
        });

        function getObjects() {
            var smensaje = $('#MainContent_cmbUsu').find('option:selected').text();
            var dataString = "{ 'message' : '" + smensaje + "'}"; 
            $.ajax({
                type: 'POST', //Tipo de peticiòn
                url: 'VerPlano.aspx/getObjects', // Url y metodo que se invoca
                data: dataString,  //Necesario cuando queremos mandar algun parametro
                contentType: 'application/json; charset=utf-8',
                dataType: 'json', //Tipo de dato con el que se realiza la llamada
                success: function (response) {
                    var miArray = response.d.split("-");
                    var aux = 0;
                    for (var i = 0; i < miArray.length; i++) {
                        var miArrayAux = miArray[i];
                        var miArray2 = miArrayAux.split("_");
                        var tipoObj = 0;
                        var idObj = 0;
                        var alto = 0;
                        var ancho = 0;
                        var res = 0;
                        for (var i2 = 0; i2 < miArray2.length; i2++) {
                            aux = aux + 1;

                            switch (i2) {
                                case 1:
                                    idObj = miArray2[i2].toString();
                                    break;
                                case 2:
                                    alto = miArray2[i2].toString();
                                    break;
                                case 3:
                                    ancho = miArray2[i2].toString();
                                    break;
                                case 0:
                                    tipoObj = miArray2[i2].toString();
                                    break;
                            }
                        }
                        var altoN = alto.replace(",", ".");
                        var anchoN = ancho.replace(",", ".");
                        posicinarObj(tipoObj, idObj, altoN, anchoN);
                    }
                }
            });
            return false;
        }

        function posicinarObj(tipoObj, idObj, ancho, alto) {
            if (tipoObj == 1) {
                var altoAux = (90 - alto);
                $('<div  id="cam' + idObj + '"' + ' style="cursor:pointer; left:' + ancho + '%; bottom:' + altoAux + '%;background-repeat:no-repeat;background-image:url(../Imagenes/camara.jpg);position:absolute;width:5%;height:10%;position:absolute;"' + 'onclick="verCam(this.id)"></div>').appendTo("#makeMeDroppable");
            }
            if (tipoObj == 2) {
                var altoAux2 = (90 - alto);
                $('<div id="lamp' + idObj + '"' + ' style="cursor:pointer; left:' + ancho + '%; bottom:' + altoAux2 + '%;background-repeat:no-repeat;background-image:url(../Imagenes/luz_apagada.jpg);position:absolute;width:5%;height:10%;position:absolute;"' + 'onclick="encenderLuz(this.id)"></div>').appendTo("#makeMeDroppable");
            }
            if (tipoObj == 3) {
                var altoAux3 = (90 - alto);
                $('<div id="sensor' + idObj + '"' + ' style="cursor:pointer; left:' + ancho + '%; bottom:' + altoAux3 + '%;background-repeat:no-repeat;background-image:url(../Imagenes/sensor_prendido.jpg);position:absolute;width:5%;height:10%;position:absolute;"' + '"></div>').appendTo("#makeMeDroppable");
            }
        }


        function encenderLuz(id) {
            $('#MainContent_miInput2').val("");
            $('#MainContent_miInput2').val(id);
            sendRequest(id);
            $("#imagen_bloqueador").html("<img src='../Imagenes/new-loading.gif.pagespeed.ce.jPPftIEsbw.gif'>");
            $("#bloqueo").show(); 	//MOSTRAR LA PANTALLA BLOQUEADOR
            setTimeout(function () {
                $("#bloqueo").hide(); //OCULTAR LA PANTALLA BLOQUEADORAS
                getLuzStatus(id);
            }, 500);            
        }

        function verCam(id) {
            var camDir = id.substring(3, id.length).replace(/[,]/gi, '.');
            $("#videoContenido").find("object").remove();
            $('<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="640" height="480" id="vlc"> <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="rtsp://' + camDir +'" > </embed> </object>').appendTo("#videoContenido");
            $('#<%=btnVerCam.ClientID %>').click();
        }

        setInterval(function () {
            $('#makeMeDroppable div').each(function (index) {
                var str = this.id;
                if (str.substring(0, 4) == "lamp") {

                    $("#imagen_bloqueador").html("<img src='../Imagenes/new-loading.gif.pagespeed.ce.jPPftIEsbw.gif'>");
                    $("#bloqueo").show(); 	//MOSTRAR LA PANTALLA BLOQUEADOR

                    sendRequestAsk(str);
                    var i = 0;
                    while (i < 690000000) {
                        i++
                    }
                    getLuzStatus(str);

                    $("#bloqueo").hide(); //OCULTAR LA PANTALLA BLOQUEADORAS
                }
            })
        }, 30000);


        function getLuzStatus(id) {

            var dataString = "{ 'message' : '" + id + "'}";

            $.ajax({
                type: 'POST', //Tipo de peticiòn
                url: 'VerPlano.aspx/getLuzStatus', // Url y metodo que se invoca
                data: dataString, //Necesario cuando queremos mandar algun parametro
                contentType: 'application/json; charset=utf-8',
                dataType: 'json', //Tipo de dato con el que se realiza la llamada
                success: function (response) {
                    //  alert('recibio:' + response.d);
                    var miArray = response.d.split(":");
                    for (var i2 = 0; i2 < miArray.length + 1; i2++) {
                        switch (i2) {
                            case 0:
                                luz = "lamp" + miArray[i2];
                                break;
                            case 1:
                                estado = miArray[i2];
                                break;
                        }
                    }
                    actualizarEstado(luz, estado);
                }
            });
            return false;
        }

        function sendRequest(id) {

            var dataString = "{ 'message' : '" + id + "'}";

            $.ajax({
                type: 'POST', //Tipo de peticiòn
                url: 'VerPlano.aspx/sendRequest', // Url y metodo que se invoca
                data: dataString, //Necesario cuando queremos mandar algun parametro
                contentType: 'application/json; charset=utf-8',
                dataType: 'json', //Tipo de dato con el que se realiza la llamada
                success: function (response) {
                    
                }
            });
            return false;
        }

        function sendRequestAsk(id) {

            var dataString = "{ 'message' : '" + id + "'}";

            $.ajax({
                type: 'POST', //Tipo de peticiòn
                url: 'VerPlano.aspx/sendRequestAsk', // Url y metodo que se invoca
                data: dataString, //Necesario cuando queremos mandar algun parametro
                contentType: 'application/json; charset=utf-8',
                dataType: 'json', //Tipo de dato con el que se realiza la llamada
                success: function (response) {

                }
            });
            return false;
        }

        function actualizarEstado(idObj, estado) {

            myO = $('#' + idObj);
            if (estado == "True") {
                myO.css("background-image", "url(../Imagenes/../Imagenes/lamp.jpg)");
            } else {
                myO.css("background-image", "url(../Imagenes/luz_apagada.jpg)");
            }
        }

        setInterval(function () {
            getSensorStatus();
        }, 1000);

        function getSensorStatus() {
            $.ajax({
                type: 'POST', //Tipo de peticiòn
                url: 'VerPlano.aspx/getSensorStatus', // Url y metodo que se invoca
                data: '{ }', //Necesario cuando queremos mandar algun parametro
                contentType: 'application/json; charset=utf-8',
                dataType: 'json', //Tipo de dato con el que se realiza la llamada
                success: function (response) {
                    var miArray = response.d.split("-");
                    for (var i = 0; i < miArray.length; i++) {
                        var miArrayAux = miArray[i];
                        var miArray2 = miArrayAux.split(":");
                        var sensor = "";
                        var estado = "";
                        for (var i2 = 0; i2 < miArray2.length; i2++) {
                            switch (i2) {
                                case 0:
                                    sensor = miArray2[i2];
                                    break;
                                case 1:
                                    estado = miArray2[i2];
                                    break;
                            }
                            actualizarEstadoSen(sensor, estado);
                        }
                    }
                }
            });
            return false;
        }

        function actualizarEstadoSen(idObj, estado) {
            myO = $('#' + idObj);
            if (estado == "True") {
                myO.css("background-image", "url(../Imagenes/sensor_apagado.jpg)");
            } else {
                myO.css("background-image", "url(../Imagenes/sensor_prendido.jpg)");
            }
        }

        function ChooseCasa() {
            $('#<%=btnAux3.ClientID %>').click();
        }
        function ChoosePlano() {
            $('#<%=btnAux2.ClientID %>').click();
        }

    </script>

</asp:Content>